<template>
  <div>
    <h1>个人信息</h1>
    <div style="margin: 20px" />
    <el-form
      ref="person"
      :label-position="labelPosition"
      label-width="100px"
      :model="person"
      style="max-width: 460px"
    >
      <el-form-item label="用户名">
        <el-input v-model="person.username" disabled />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="person.nickName" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="person.age" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="person.sex" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="person.address" />
      </el-form-item>
      <el-form-item label="余额">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="person.account"
          show-password
        />
      </el-form-item>
      <el-button type="success" @click="updateperson">保存</el-button>
    </el-form>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "Person",
  data() {
    return {
      labelPosition: "right", // 默认值
      loading: true,
      person: {},
      search: "",
    };
  },
  created() {
    var userStr = sessionStorage.getItem("user") || "{}";
    this.person = JSON.parse(userStr);
  },
  methods: {
    updateperson() {
      request.post("/user/updateperson", this.person).then((res) => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: "保存成功",
          });
          console.log("res.data:" + res.data);
          // 前端缓存用户信息
          sessionStorage.setItem("user", JSON.stringify(res.data));
          this.$emit("userStored", JSON.parse(sessionStorage.getItem("user")));
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>
<style scoped></style>
